<template>
    <div>  
        <h1>产品列表</h1>
        <Table :tableData="products"></Table>
        <h2>用户列表</h2>
        <Table :tableData="users">
            <template v-slot:tablehead>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </template>
            <!-- 插槽作用域 在插槽内容里面调用插槽组件上面的数据 -->
            <!-- v-slot:指令可以简写为 # 
                #tablebody="slotProp组件内部<slot :tdata="tableData"></slot>这个组件上的属性"
            -->
            <template #tablebody="slotProp">
                <tr v-for="people in slotProp.tdata">
                    <td>{{people.id}}</td>
                    <td>{{people.name}}</td>
                    <td>{{people.age}}</td>
                    <td>{{people.gender}}</td>
                </tr>
            </template>
        </Table>
    </div>
</template>
<!-- 
    slot 插槽  一般用第三方ui组件都支持插槽定制.
    生命周期 
    watch
 -->
<script>
    import Table from './components/Table.vue'
    export default {
        data(){
            return {
                products:[
                    {id:1,name:"Ipad",price:1999},
                    {id:2,name:"Iphone",price:6999},
                    {id:3,name:"华为Pro",price:5999},
                    {id:4,name:"小米Pro",price:4999},
                    {id:5,name:"华为P50",price:3999},
                ],
                users:[
                    {id:1,name:"老谢",age:1999,gender:"男"},
                    {id:2,name:"老王",age:6999,gender:"男"},
                    {id:3,name:"老李",age:5999,gender:"女"},
                    {id:4,name:"静静",age:4999,gender:"女"},
                    {id:5,name:"小黄",age:3999,gender:"男"},
                ]
            }
        },
        components:{
            Table
        }
    }
</script>

<style lang="scss" scoped>

</style>